<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import * as echarts from "echarts";
import {useStore} from "vuex";
import {RefreshRight} from "@element-plus/icons-vue";
import {DateCalUtil} from "@/script/util/DateCalUtil";

import {QueryCurveService} from "@/script/api/QueryCurveService";
import {ElMessage} from "element-plus";

const store = useStore();
const queryCurveService = new QueryCurveService();

// 图表设置
const chartDom = ref();

const option = {
  // 曲线图配置
  tooltip: {},
  xAxis: {
    axisLabel: {
      interval: 0,
      rotate: 45,
      show: true
    },
    data: null
  },
  yAxis: {},
  series: [{
    name: '住房收入曲线', type: 'line', data: null, smooth: true
  }]
};

let chartInst = null;
onMounted(async () => {
  // 参照初始状态读取收入汇总数据
  // 完成图标设置
  await nextTick();
  chartInst = echarts.init(chartDom.value);
  // 查询本月数据
  let monthParam = {
    startDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1)
        .toISOString().split('T')[0],
    endDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        .toISOString().split('T')[0]
  };

  // 查询曲线数据（横轴dataDate，纵轴realIncome）
  let curveData = await queryCurveService.queryRoomIncomeCurve(monthParam);
  // 导入横轴纵轴配置，横轴对dataDate，纵轴对realIncome
  option.xAxis.data = curveData.dataDate;
  option.series.data = curveData.realIncome;
  // 刷新图层
  chartInst.setOption(option);
});

onUnmounted(() => {
  if (chartInst != null && chartInst.dispose) {
    chartInst.dispose();
  }
});

const dateRange = ref();
const dateShortcuts = [...store.state.dateShortcuts].filter(item => item.text !== '今天');
dateShortcuts.push({
  text: '今年', value: () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), 0, 1);
    const end = new Date(today.getFullYear(), 11, 31);
    return [start, end];
  }
})

const updateCurve = async () => {
  let dataParam = {
    startDate: dateRange.value[0],
    endDate: dateRange.value[1]
  }
  // 查询曲线数据
  let curveData = await queryCurveService.queryRoomIncomeCurve(dataParam);
  console.log(curveData);
  // 设置横轴日期和纵轴收入数据
  if (!curveData || !curveData.dataDate || !curveData.realIncome) {
    ElMessage({message: '查询数据失败！', type: "error"})
  } else {
    option.xAxis.axisLabel.show = curveData.dataDate.length < 40;
    option.xAxis.data = curveData.dataDate;
    option.series[0].data = curveData.realIncome;
    console.log(option);
    // 刷新图层
    chartInst.setOption(option);
  }
}
</script>

<template>
  <span class="tab-title">综合曲线图</span>
  <el-date-picker v-model="dateRange" style="width: 240px; margin-right: 15px;margin-bottom: 10px;"
                  size="default" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  :shortcuts="dateShortcuts"
                  range-separator="到" start-placeholder="起始日期" end-placeholder="终止日期"/>
  <el-button type="success" :icon="RefreshRight" size="default" style="margin-bottom: 10px" @click="updateCurve"/>
  <div ref="chartDom" id="income-curve"></div>
</template>


<style scoped>
#income-curve {
  font-family: sc-song-heavy, serif;
  height: 300px;
  margin-top: -20px;
  margin-left: -95px;
}

.tab-title {
  font-size: 24px;
  margin-left: 5px;
  margin-right: 20px;
  margin-top: 10px;
}
</style>